<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Copy Test</title>
<meta charset="utf-8">
</head>
  <body id="body" style="user-select: none;"> <!-- text doesn't seem to matter here -->
    <h1>Test clipboard code: none</h1>
    <div id="area_id" contenteditable="true" style="-webkit-user-select: text; border: red; background-color: grey">dummy content</div>

    <ul>
      <li id="select" data-event="select"><a href="#" class="item-link list-button">Select All</a></li>
      <li/>
      <li/>
      <li id="both" data-event="both"><a href="#" class="item-link list-button">Both TouchStart</a></li>
      <li/>
      <li/>
      <li id="bothclick" data-event="both-click"><a href="#" class="item-link list-button">Both Click</a></li>
      <li/>
      <li/>
      <li id="bothstopclick" data-event="both-stop-click"><a href="#" class="item-link list-button">Both StoponTouch Click</a></li>
      <li/>
      <li/>
      <li id="aclass" data-event="both-aclass"><a class>Both AClass (fails on iOS)</a></li>
      <li/>
      <li/>
      <li id="paste" data-event="paste"><a href="#">Paste</a></li>
      <li/>
      <li/>
    </ul>

    <div id="clipcontent">
    </div>
</body>
  <script defer>
    var serial = 42;

    document.getElementById('area_id').focus();

    // --------- select function ---------
    var doSelect = function() {
        console.log('select whole area');
        var selection     = window.getSelection();
        selection.removeAllRanges();
        var rangeToSelect = document.createRange();
        elem = document.getElementById('area_id');
        rangeToSelect.selectNodeContents(elem);
        selection.addRange(rangeToSelect);
    };
    var select = document.getElementById('select');
    select.onclick = function(ev) {
        doSelect();
    };

    // --------- copy function ---------
    var doCopy = function(ev) {
        console.log('On touch copy invoke');

        try
        {
            console.log('exec command copy - before');
            _ret = document.execCommand('copy');
           console.log('exec command copy success: ' + _ret);
        }
        catch (err)
        {
           console.log('exception in copy ' + err);
           _ret = false;
        }
    };

    // --------- both function ---------
    var both = document.getElementById('both');
    both.ontouchstart = function(ev) {
        doCopy();
    };

    var bothClick = document.getElementById('bothclick');
    bothClick.onclick = function(ev) {
        doCopy();
    };

    // JQuery context menu does this on touch - killing a click event
    var bothStopClick = document.getElementById('bothstopclick');
    bothStopClick.ontouchstart = function(ev) {
        console.log('stop on touch!');
        ev.preventDefault();
        ev.stopImmediatePropagation();
        return false;
    };
    bothStopClick.onclick = function(ev) {
        doCopy();
    };

    var aclass = document.getElementById('aclass');
    aclass.onclick = function(ev) {
        doCopy();
    };

    // Actually put serial data in the thing ..
    document.oncopy = function(ev) {
        ev.preventDefault();
        var forclip = 'serial ' + serial++ + ' ops';
        console.log('set clip to ' + forclip);
        ev.clipboardData.setData('text/plain', forclip);
    };

    // Do the selection
    document.onbeforecopy = function(ev) {
        console.log('we have to select in a before copy event [!]');
        doSelect();
    };

    // --------- copy function ---------
    var paste = document.getElementById('paste');
    paste.onclick = function(ev) {

        if (document.execCommand('paste'))
            console.log('Paste succeeded');
        else
            console.log('Paste failed');
    };

    document.onpaste = function(ev) {
        if (!ev.clipboardData) { // non-standard
            console.log('No clipboard data');
            return;
        }

        var dataTransfer = ev.clipboardData;
        var types = dataTransfer.types;

        console.log('We have ' + types.length + ' types');
        for (var t = 0; t < types.length; ++t) {
            var data = new Blob([dataTransfer.getData(types[t])]);
            console.log('type ' + types[t] + ' length ' + data.size +
			    ' -> 0x' + data.size.toString(16));
            if (types[t].startsWith('text/'))
                 console.log('data: ' + dataTransfer.getData(types[t]));
        }

        ev.preventDefault();
        return false;
    };

    </script>
</body></html>
